<template>
	<view style="height: var(--status-bar-height);">
	</view>
	<view class="uni-column" style="overflow-y: hidden">
		<view class="content" id="content">
			<scroll-view id="scrollview" scroll-y="true" style="height: 90vh;" :scroll-with-animation="true"
				:scroll-top="scrollTop" scroll-into-view="bottom-input">
				<message-show ref="messageShow" v-for="(message, index) in messages" :key="index" v-bind:message="message"
					:id="index" :currentMax="currentMax"></message-show>
				<view id="bottom"></view>
			</scroll-view>
		</view>
		<view id="bottom-input" class="float-container" style="width: 100vw;">
			<chat-input ref="chatInput" @send-message="getInputMessage"></chat-input>
		</view>
	</view>
</template>

<script>
	import chatInput from "../../components/chatinput.vue";
	import messageShow from "../../components/messageshow.vue";
	export default {
		data() {
			return {
				scrollTop: 0,
				messages: [],
				isLoading: false,
				isShowLoading: false,
				//模拟队列做屏幕自动下滑
				queueCount: 0,
				queueTimer: null,
				currentMax: 1,
				showAnimation: true,
				showTopGuide: false,
				showModelSelect: false,
			};
		},
		components: {
			chatInput,
			messageShow,
		},
		beforeCreate: function() {},
		onShow() {
			const inputValue = null;
			console.log("onShow");
			if (inputValue !== null) {
				this.$refs.chatInput.setInputValue(inputValue);
			}
			if (uni.isShowLoading) {
				uni.hideLoading();
				uni.isShowLoading = false;
			}

			this.$nextTick(() => {
				// 在页面渲染结束后执行的代码
				// 这里可以进行你需要的操作
			});

			if (!this.isLoading) {
				//重新设置引导语
				this.currentMax = this.messages.length;
				//强制滑动到底部
				this.forceScrollBottom();
			}
		},
		onReady: function() {
			console.log("onReady");
			const that = this;
			this.queueTimer = setInterval(() => {
				if (that.queueCount > 0) {
					that.queueCount--;
					console.log(that.queueCount, 'fhup');
					// 执行滚动就行
					this.forceScrollBottom()
				}
			}, 500);
		},
		onLoad: function() {
			console.log("onLoad");
			const that = this;
			const res = uni.getSystemInfoSync();
			//获取缓存数据，并展示
			const resSt = uni.getStorageSync('messages_list_real_leiyunbaihuo');
			if (resSt) {
				this.messages = resSt;
			} else {
				this.messages.push({
					user: "home",
					type: "head",
					content: "我是小房，你的专属智能助手，有什么能帮助您的吗",
				});
			}
			this.queueCount = this.queueCount++;

		},
		methods: {
			barLeftClick: function(e) {
				console.log("barLeftClick点击了");
				this.showModelSelect = !this.showModelSelect;
			},
			forceScrollBottom: function() {
				//关闭动画，滑倒底部
				this.scrollTop = this.scrollTop + 100000000000000000;
			},
			changeShowTopGuide: function() {
				this.showTopGuide = false;
			},
			saveCache: function() {
				const that = this;
				setTimeout(() => {
					// 处理缓存数据
					uni.setStorage({
						key: 'messages_list_real_leiyunbaihuo',
						data: that.messages.length > 20 ?
							that.messages.slice(
								that.messages.length - 20,
								that.messages.length
							) : that.messages,
					});
				}, 500);
			},
			// 发送完消息的回调
			getInputMessage: function(message) {
				//获取子组件的输入数据
				if (this.isLoading) {
					this.showStopDialog();
					return;
				}
				this.addMessage("customer", message.content, false);
				this.addMessage("home", "", false, false, true);
				this.queueCount++;
				this.toRobot(message.content);
			},
			addMessage: function(user, content, hasSub, subcontent, loading) {
				var that = this;
				const msgData = {
					user: user,
					content: content,
					hasSub: hasSub,
					subcontent: subcontent,
					loading: loading,
				};
				that.messages.push(msgData);
			},
			// 值转换
			arrayBufferToString: function(arr) {
				if (typeof arr === "string") {
					return arr;
				}
				var dataview = new DataView(arr.data);
				var ints = new Uint8Array(arr.data.byteLength);
				for (var i = 0; i < ints.length; i++) {
					ints[i] = dataview.getUint8(i);
				}
				arr = ints;
				var str = "",
					_arr = arr;
				for (var i = 0; i < _arr.length; i++) {
					var one = _arr[i].toString(2),
						v = one.match(/^1+?(?=0)/);
					if (v && one.length == 8) {
						var bytesLength = v[0].length;
						var store = _arr[i].toString(2).slice(7 - bytesLength);
						for (var st = 1; st < bytesLength; st++) {
							store += _arr[st + i].toString(2).slice(2);
						}
						str += String.fromCharCode(parseInt(store, 2));
						i += bytesLength - 1;
					} else {
						str += String.fromCharCode(_arr[i]);
					}
				}
				return str;
			},
			showStopDialog() {
				const that = this;
				uni.showModal({
					title: "提示",
					content: "您的问题还在回复中",
					showCancel: false,
					success: function(res) {},
				});
			},
			toRobot: function(info) {
				const that = this;
				uni.getSystemInfo({
					success: function(res) {
						console.log(res.uniPlatform);
						if (res.uniPlatform === "web") {
							// web网页
							// that.addMessage("home", info + "_response", false);
							that.addMessage("home",
								'你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王,你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王,你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王大撒大撒打算打算你好大王' +
								"_response", false);
							//saveCache
							that.saveCache();
							this.queueCount++;
						} else if (res.uniPlatform === "app") {
							that.addMessage("home",
								info + "_response", true);
							that.saveCache();
							this.queueCount++;
						}
					},
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.dialog_container::after {
		border: 12px solid transparent;
		border-bottom: 12px solid rgb(76, 76, 76, 0.8);
		top: -24px;
		right: 10vw;
		width: 0;
		height: 0;
		position: absolute;
		content: " ";
	}

	.dialog_container {
		position: fixed;
		top: 12px;
		right: 12px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		width: 200px;
		z-index: 9999;
	}

	.dialog_text {
		padding: 10px 20px;
		background-color: rgb(76, 76, 76, 0.8);
		color: #fafafa;
		font-size: 14px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		font-family: Arial, sans-serif;
		border-radius: 5px;
		max-width: 300px;
	}

	.float-container {
		position: fixed;
		bottom: 0px;
		z-index: 999;
		/* 将容器置于最顶层 */
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		#scrollview ::-webkit-scrollbar {
			display: none;
		}
	}

	.logo {
		height: 100rpx;
		width: 100rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 25rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>